<template>

<!-- 侧边导航栏 -->
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ff7f0082" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    
    <!-- 标题栏 -->
    <h3>{{isCollapse? message_collaspe :message}}</h3>

    <!-- 没有子属性 -->
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
        <i :class="'el-icon-' + item.icon"  ></i>
        <span slot="title">{{item.label}}</span>
    </el-menu-item>    
    
    <!-- 有子属性 -->
    <el-submenu  v-for="item in hasChildren" :index="item.path" :key="item.path">
        <!-- 一级菜单 -->
        <template slot="title">
        <i :class="' el-icon-' + item.icon"></i>
        <span slot="title">  {{item.label}}  </span>
        </template>
        
        <!-- 二级菜单  -->
        <el-menu-item-group  v-for="(subItem, subIndex) in item.children" :key="subItem.path">
        <el-menu-item @click="clickMenu(subItem)" :index="subIndex">{{subItem.label}}</el-menu-item>
        </el-menu-item-group>

    </el-submenu>


    </el-menu>
    
</template>


<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

    // 导航栏样式
  .el-menu {
      height: 100%;
      border: none;
      h3 {
          color: #fff;
          text-align: center;
          line-height: 48px;
      }
  }
</style>

<script>
  export default {
    data() {
      return {
        // isCollapse: true,
        // 侧边栏菜单数据
        message: "Linux内核攻击检测系统",
        message_collaspe: "检测系统",
        menu:[]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      // 跳转到菜单被点击的界面   
      clickMenu(item) {
          //   跳转路由
          this.$router.push({
              name: item.name
          })
      }
    },
    computed: {
        // 根据是否有子属性获取元素
        noChildren() {
            return this.asyncMenu.filter(item => !item.children);
        },
        hasChildren() {
            return this.asyncMenu.filter(item =>  item.children);
        },
        // 折叠导航栏
        isCollapse() {
            return this.$store.state.tab.isCollapse
        },
        asyncMenu() {
            return this.$store.state.tab.menu
        }        
    },
  }

  
</script>